<template>
	<div class="menu_container">
		<el-dropdown>
			<img src="../assets/images/svg/system/setting.svg" class="setting_logo" alt="设置" />
			<template #dropdown>
				<div id="setting_menu">
					<el-dropdown-menu>
						<el-dropdown-item v-on:click="editBookmarkData('baidu')">
							收藏夹编辑
						</el-dropdown-item>
						<el-dropdown-item v-on:click="switchSearchType('biying')">
							必应
						</el-dropdown-item>
						<el-dropdown-item v-on:click="switchSearchType('google')">
							谷歌
						</el-dropdown-item>
					</el-dropdown-menu>
				</div>
			</template>
		</el-dropdown>
	</div>
	<div class="container" id="container_div" @mousewheel="scrollInit">
		<div class="logo_container">
			<span class="logo_font logo_font_blue">D</span>
			<span class="logo_font logo_font_red">t</span>
			<span class="logo_font logo_font_yellow">o</span>
			<span class="logo_font logo_font_blue">o</span>
			<div class="container1">
				<div class="ghost">
					<div class="ghostEyes"></div>
					<div class="ghostDimples"></div>
					<div class="ghostFeet">
						<div class="ghostFoot"></div>
						<div class="ghostFoot"></div>
						<div class="ghostFoot"></div>
						<div class="ghostFoot"></div>
					</div>
				</div>
				<div class="shadow"></div>
			</div>
			<span class="logo_font logo_font_red">s</span>
		</div>
		<div class="input_container" id="input_container">
			<div class="input_div">
				<div class="search_logo"></div>
				<input v-model="searchContent" class="input-box" placeholder="" ref="authFocusInput" @input="searchRecommend" @keydown.enter="search" />
				<el-dropdown>
					<div :class="searchPreference === 'baidu' ? 'search_engine_baidu_logo' : searchPreference === 'biying' ? 'search_engine_biying_logo' : 'search_engine_google_logo'" id="search_engine_logo"></div>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-on:click="switchSearchType('baidu')">
								<img src="../assets/images/svg/search/baidu.svg" class="search_logo_baidu_mini" alt="百度搜索" />
								百度
							</el-dropdown-item>
							<el-dropdown-item v-on:click="switchSearchType('biying')">
								<img src="../assets/images/svg/search/biying.svg" class="search_logo_biying_mini" alt="必应搜索" />
								必应
							</el-dropdown-item>
							<el-dropdown-item v-on:click="switchSearchType('google')">
								<img src="../assets/images/svg/search/google.svg" class="search_logo_google_mini" alt="谷歌搜索" />
								谷歌
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="recommend_container" v-if="recommendShow">
				<div class="line" />
				<div id="container" class="recommend_container_div">
					<div v-for="(recommendData, index) in recommendDataList" :class="selectIndex === index && selectIndex != null ? 'recommend_content_select' : 'recommend_content_unselect'"
						@mouseenter="selectSearchIndex(index)"
						v-on:click="clickSearchIndex(index)">
						<div v-if="recommendData.type === 'browserBookmark'" class="recommend_data_show">
							<img src="../assets/images/svg/search/bookmark.svg" class="search_logo_bookmark" alt="书签" />
							<span v-html="recommendData.searchName" class="recommend_content" />
						</div>
						<div v-if="recommendData.type === 'bookmark'" class="recommend_data_show">
							<img src="../assets/images/svg/search/collection.svg" class="search_logo_bookmark" alt="收藏" />
							<span v-html="recommendData.searchName" class="recommend_content" />
						</div>
						<div v-if="recommendData.type === 'hotSearch'" class="recommend_data_show">
							<img src="../assets/images/svg/search/recommend.svg" class="search_logo_bookmark" alt="推荐" />
							<span v-html="recommendData.name" class="recommend_content" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="tools_container" :class="toolsMenuShowAnimation === null ? 'tools_container' : (toolsMenuShowAnimation ? 'tools_container tools_container_in' : 'tools_container tools_container_out')" v-if="toolsMenuShow">
			<el-tabs v-model="editableTabsValue" @edit="handleTabsEdit" @tab-change="handleTabClick" :editable="editBookmarkFlag">

				<el-tab-pane v-for="(item,index) in bookmarkData" :key="item.index" :name="item.index">
					<template #label>
						<el-popover v-if="editableTabsValue === item.index" v-model:visible="popoverVisible" trigger="click" placement="bottom-start" width="160">
							<el-input v-model="editTabTitle"></el-input>
							<div style="text-align: center; margin-top: 10px">
								<el-button type="danger" @click="cancel">取消</el-button>
								<el-button :disabled="editTabTitle === ''" type="primary" @click="confirm">更新</el-button>
							</div>
							<template #reference>
								<span style="display: flex;height: 100%;align-items: center;">{{ item.name }}</span>
							</template>
						</el-popover>
						<span v-else>{{ item.name }}</span>
					</template>


					<div class="tools_container_books">
						<div v-for="(bookmark, index) in bookmarkData[index].group" style="margin-bottom: 10px;margin-top: 20px;font-size: 16px">
							<el-row>
								<el-col :span="3"><div class="grid-content-title">{{bookmark.name}}</div></el-col>
								<template v-for="(bookmark, index) in bookmark.list" >
									<el-col :span="3">
										<div class="grid-content" v-if="bookmark">
											<img :src="getFavicon(bookmark.url)" onerror="this.src='https://dtools.cpolar.cn/api/dtools-utils/file/preview/RPv1iA95H8qdVvQ7wEMg5j'" class="favicon">
											<a :href="bookmark.url" style="text-decoration: none;color: black">{{bookmark.name}}</a>
										</div>
									</el-col>
								</template>
							</el-row>
						</div>
					</div>


				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import recommendService from '@/service/recommendService.js';
import { Soccer } from '@element-plus/icons-vue';

export default {
	data() {
		return {
			searchPreference: 'baidu',
			recommendShow: false,
			toolsMenuShow: true,
			toolsMenuShowAnimation: null,
			searchContent: '',
			recommendDataList: [],
			selectIndex: null,
			selectTopIndex: 0,
			bookmarkPage: 0,
			bookmarkTitleDragNode: null,
			bookmarkData: [
				{
					group: [
						{
							list: [
								{
									name: '测试区',
									url: 'https://kcf-test.apps.digiwincloud.com.cn/login'
								},
								{
									name: '生产区(华为)',
									url: 'https://kcf.apps.digiwincloud.com.cn/'
								},
							],
							name: '各区网站'
						},
						{
							list: [
								{
									name: '冲刺表',
									url: 'https://docs.qq.com/sheet/DSlNEUE1NTUxBQWNt?tab=cjh33q',
								},
								{
									name: 'PB表',
									url: 'https://docs.qq.com/sheet/DWFVNZmNreWFjRGZy?tab=BB08J2',
								},
								{
									name: '高保真',
									url: 'https://www.figma.com/file/PcbIWAUDCNcKbOnmRWgKjq/%E7%9F%A5%E8%AF%86%E4%B8%AD%E5%8F%B0--2.0?type=design&node-id=1065-266204&mode=design&t=czDlY0FhfJzf9cap-0',
								},
								{
									name: '原型图*',
									url: 'https://modao.cc/app/pxsbvDyps0ipel18DkCO9d',
								},
								{
									name: '原型图(旧)',
									url: 'https://modao.cc/app/C3Aof3zZrx9fm4h0KFcgX',
								},
								{
									name: '高保真(旧)',
									url: 'https://www.figma.com/file/ce7rEIOSqsSqapgphB18sF/%E7%9F%A5%E8%AF%86%E4%B8%AD%E5%8F%B0?type=design&node-id=1881-30826&mode=design&t=67qDNWwSVe42lBnY-0',
								},
								{
									name: '测试',
									url: 'https://www.figma.com/file/ce7rEIOSqsSqapgphB18sF/%E7%9F%A5%E8%AF%86%E4%B8%AD%E5%8F%B0?type=design&node-id=1881-30826&mode=design&t=67qDNWwSVe42lBnY-0',
								}
							],
							name: '迭代资料',
						},
					],
					name: 'KCF',
					index: 1
				},
				{
					group: [
						{
							list: [
								{
									name: '开发区',
									url: 'https://dashboard-test.digiwincloud.com.cn/#!/overview?namespace=default',
								},
								{
									name: '测试区',
									url: 'https://dashboard-hw-test.digiwincloud.com.cn/#/login',
								},
								{
									name: '正式区(华为)',
									url: 'https://dashboard-hw.digiwincloud.com.cn/#/login',
								},
								{
									name: '正式区(微软)',
									url: 'https://dashboard.digiwincloud.com/#/login',
								},
							],
							name: 'Kubernetes',
						},
						{
							list: [
								{
									name: '华为区',
									url: 'https://jms-hw.digiwincloud.com.cn/luna/?_=1700720560591',
								},
							],
							name: '堡垒机',
						},
						{
							list: [
								{
									name: '开发区',
									url: 'https://archery.digiwincloud.com.cn/login/',
								},
								{
									name: '华为区',
									url: 'https://archery-hw.digiwincloud.com.cn/login/',
								},
								{
									name: '微软区',
									url: 'https://archery.digiwincloud.com/login/',
								},
							],
							name: '数据库',
						},
						{
							list: [
								{ name: 'DroneCI', url: 'http://172.16.101.224:22690/' },
								{ name: 'DevOps', url: 'https://ops.digiwincloud.com.cn/' },
								{
									name: '配置仓库',
									url: 'https://gitlab.digiwincloud.com.cn/users/sign_in',
								},
								{
									name: 'Maven仓库',
									url: 'https://repo.digiwincloud.com.cn/maven/#browse/upload:ksc-release',
								},
								{
									name: '镜像仓库',
									url: 'https://registry.digiwincloud.com.cn/harbor/sign-in?redirect_url=%2Fharbor%2Fprojects',
								},
							],
							name: '服务发布',
						},
						{
							list: [
								{
									name: '测试区',
									url: 'https://console-test.digiwincloud.com.cn',
								},
								{
									name: '生产区(华为)',
									url: 'https://console.digiwincloud.com.cn',
								},
								{
									name: '生产区(微软)',
									url: 'https://console.digiwincloud.com/',
								},
							],
							name: '鼎捷云',
						},
					],
					name: '运维',
					index: 2
				},
				{
					group: [
						{
							list: [
								{
									name: '需求迭代',
									url: 'https://docs.qq.com/sheet/DR2hJdlBhRkNzeWhE?tab=3l32yo',
								},
							],
							name: '迭代文档',
						},
					],
					name: 'KBS',
					index: 3
				},
				{
					group: [
						{
							list: [
								{
									name: '测试区',
									url: 'https://athena-test.digiwincloud.com.cn/login',
								},
								{
									name: '正式区(华为)',
									url: 'https://athena.digiwincloud.com.cn/login',
								},
							],
							name: '各区网站',
						},
						{
							list: [
								{
									name: '需求单',
									url: 'https://docs.qq.com/sheet/DVGpxUGx3UXZNS0NX?tab=8rqrhk',
								},
								{
									name: '原型图',
									url: 'https://modao.cc/app/UVhGNbrrjl17TxIVk2Y#screen=slfcc8tskabnly8',
								},
							],
							name: '迭代资料',
						},
						{
							list: [
								{
									name: '服务编排',
									url: 'https://sc-console-test.digiwincloud.com.cn/#/domains/athena/workflows',
								},
								{ name: '引擎汇总', url: 'http://172.16.2.230/' },
								{
									name: '页面标签',
									url: 'https://www.kdocs.cn/l/cvTa8iU97BLm',
								},
							],
							name: '流程引擎',
						},
					],
					name: 'FRC',
					index: 4
				},
				{
					group: [
						{
							list: [
								{
									name: '需求单',
									url: 'https://docs.qq.com/sheet/DR3Bwc0JBT0Z3eXJt?tab=BB08J2',
								},
								{
									name: '问题单',
									url: 'https://docs.qq.com/sheet/DSFFHeFhjcG14RHVz?tab=4o9o82&friendUin=qzgcGebP6huhA5SvHrWy4w%253D%253D&tdsourcetag=s_macqq_aiomsg',
								},
							],
							name: '迭代文档',
						},
					],
					name: 'KSC',
					index: 5
				},
				{
					group: [
						{
							list: [
								{
									name: 'PLM(华为测试区)',
									url: 'http://172.16.100.107:8080/plmweb',
								},
							],
							name: '网站',
						},
						{
							list: [
								{
									name: '文档',
									url: 'http://172.16.2.141:22694/html/web/controller/public/public.html#5e71d8f8e76767446b4c2805',
								},
								{
									name: '学习网站',
									url: 'http://221.6.15.182:8608/EFLearning',
								},
								{ name: '中间件', url: 'http://172.16.2.141/' },
								{
									name: 'DMC',
									url: 'http://172.16.2.141:22694/html/web/controller/public/public.html#5bbc58f58833b812036003db',
								},
							],
							name: '中间件',
						},
						{
							list: [
								{
									name: '禅道',
									url: 'https://athena-devops-zentao.digiwincloud.com.cn/user-login-L215LXRvZG8tYWxsLmh0bWw=.html',
								},
								{ name: 'GP系统', url: 'http://efgpcn.digiwin.com/NaNaWeb' },
							],
							name: '公司',
						},
					],
					name: '其他',
					index: 6
				},
				{
					group: [
						{
							list: [
								{ name: '自由鲸', url: 'https://www.freewhale.us/' },
								{ name: '电脑壁纸', url: 'https://wallhaven.cc/' },
								{ name: 'ChatGPT', url: 'https://poe.com/chatgpt' },
							],
							name: '工具',
						},
						{
							list: [
								{ name: 'HA-Net', url: 'http://112.73.93.249:8123/' },
								{ name: 'HA-Local', url: 'http://192.168.31.196:8123' },
							],
							name: '作品',
						},
					],
					name: '常用',
					index: 7
				},
				{
					group: [
						{
							list: [
								{ name: '奶牛快传', url: 'https://cowtransfer.com/' },
								{ name: '易搜', url: 'https://yiso.fun/' },
							],
							name: '效率',
						},
					],
					name: '工具',
					index: 8
				},
			],
			editableTabsValue: 1,
			editableTabs: [
				{
					title: 'Tab 1',
					name: 1,
					content: 'Tab 1 content',
				},
				{
					title: 'Tab 2',
					name: 2,
					content: 'Tab 2 content',
				},
			],
			popoverVisible: false,
			editTabTitle: '',
			editBookmarkFlag: false
		};
	},
	components: {
		Soccer,
		// DownOutlined,
	},
	methods: {
		handleTabClick(pane) {
			console.log("pane:", pane)
			this.editTabTitle = this.bookmarkData[pane - 1].name;
		},
		cancel() {
			this.popoverVisible = false;
			this.editTabTitle = '';
		},
		confirm() {
			this.popoverVisible = false;
			this.bookmarkData[this.editableTabsValue - 1].name = this.editTabTitle;
		},
		handleTabsEdit(targetName, action) {
			console.log("targetName = ", targetName)
			if (action === 'add') {
				const newTabName = this.bookmarkData.length + 1;
				this.bookmarkData.push({
					name: 'New Tab',
					index: newTabName,
					content: 'New Tab content',
				});
				this.editableTabsValue = newTabName;
				this.editTabTitle = this.bookmarkData[newTabName - 1].name;

				console.log("editableTabsValue = ", this.editableTabsValue)
				console.log("editTabTitle = ", this.editTabTitle)

			} else if (action === 'remove') {
				const tabs = this.bookmarkData;
				let activeName = this.editableTabsValue;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.index === targetName) {
							const nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.index;
							}
						}
					});
				}
				this.editableTabsValue = activeName;
				this.bookmarkData = tabs.filter((tab) => tab.index !== targetName);
			}
		},

		editBookmarkData() {
			this.editBookmarkFlag = true
		},
		switchSearchType(type) {
			localStorage.setItem('searchPreference', type);
			this.searchPreference = type;
		},

		async searchRecommend($event) {
			if (this.searchContent && this.searchContent !== '') {
				this.recommendDataList = await recommendService.getBaiduRecommendData(
					this.searchContent,
					this.searchPreference,
				);
				this.recommendShow = this.recommendDataList.length !== 0;
			} else {
				// 收起推荐框
				this.recommendShow = false;
				this.selectIndex = null;
			}

			this.selectIndex = null;
			this.selectTopIndex = 0;
		},

		clickSearchIndex(index) {
			// 收起推荐框
			let data = this.recommendDataList[index];
			this.recommendShow = false;
			this.selectIndex = null;
			this.selectTopIndex = 0;
			this.searchContent = data.name;
			this.recommendDataList = [];

			// 页面跳转
			setTimeout(() => {
				if (data.type === 'bookmark' || data.type === 'browserBookmark') {
					window.open(data.url);
				} else {
					switch (this.searchPreference) {
						case 'baidu':
							window.open(
								'https://www.baidu.com/s?wd=' + this.searchContent,
								'_blank',
							);
							break;
						case 'biying':
							window.open(
								'https://cn.bing.com/search?q=' + this.searchContent,
								'_blank',
							);
							break;
						case 'google':
							window.open(
								'https://www.google.com/search?q=' + this.searchContent,
								'_blank',
							);
							break;
					}
				}
			}, 500);
		},
		selectSearchIndex(index) {
			this.selectIndex = index;
		},

		search(event) {
			if (event.isComposing) {
				return
			}
			if (this.selectIndex !== null) {
				let data = this.recommendDataList[this.selectIndex];
				// 页面跳转
				if (data.type === 'bookmark' || data.type === 'browserBookmark') {
					window.open(data.url);
				}
			} else {
				switch (this.searchPreference) {
					case 'baidu':
						window.open(
							'https://www.baidu.com/s?wd=' + this.searchContent,
							'_blank',
						);
						break;
					case 'biying':
						window.open(
							'https://cn.bing.com/search?q=' + this.searchContent,
							'_blank',
						);
						break;
					case 'google':
						window.open(
							'https://www.google.com/search?q=' + this.searchContent,
							'_blank',
						);
						break;
				}
			}
			this.recommendShow = false;
			this.selectIndex = null;
			this.recommendDataList = [];
		},

		closeRecommendWindows() {
			this.recommendShow = false;
			this.selectIndex = null;
			this.selectTopIndex = 0;
		},

		scrollInit(e) {
			if (e) {
				if (e.wheelDelta < -300) {
					this.toolsMenuShow = true;
					this.toolsMenuShowAnimation = true;
					localStorage.setItem('showFavorites', true);
				} else if (e.wheelDelta > 300) {
					this.toolsMenuShowAnimation = false;
					setTimeout(() => {
						this.toolsMenuShow = false;
					}, 1400);
					localStorage.setItem('showFavorites', false);
				}
			}
		},
		getFavicon(url) {
			let domainRegex = /^(https?:\/\/)?([^\/]+)/i;
			let match = url.match(domainRegex);

			if (match && match.length >= 3) {
				let protocol = match[1] || "http://"; // 默认为 http://
				let domain = match[2];
				return protocol + domain  + "/favicon.ico";
			}

			return null;
		}
	},
	mounted() {
		// 页面滚动初始化
		this.scrollInit();

		// 读取初始值
		this.searchPreference = localStorage.getItem('searchPreference') || 'baidu';
		this.toolsMenuShow = JSON.parse(localStorage.getItem('showFavorites'));

		// 测试使用
		this.editTabTitle = this.bookmarkData[0].name

		const containerDiv = document.getElementById('container_div');
		containerDiv.scrollTop = 0;

		// 在组件挂载后聚焦输入框
		this.$refs.authFocusInput.focus();

		document.addEventListener('keydown', (event) => {
			const container = document.getElementById('container');
			window.cursor = 'none';
			// 检查按下的键是否是方向键
			if (event.key === 'ArrowUp') {
				// 阻止默认的键盘事件
				event.preventDefault();
				if (this.selectIndex == null || this.selectIndex === 0) {
					this.selectIndex = this.recommendDataList.length - 1;
				} else {
					this.selectIndex--;
				}
				if (this.selectIndex < this.selectTopIndex) {
					container.scrollTop -= 30;
					this.selectTopIndex--;
				}
				this.searchContent = this.recommendDataList[this.selectIndex].name;
			} else if (event.key === 'ArrowDown') {
				if (
					this.selectIndex == null ||
					this.selectIndex === this.recommendDataList.length - 1
				) {
					this.selectIndex = 0;
				} else {
					this.selectIndex++;
				}
				if (
					this.selectIndex >= 12 &&
					this.selectIndex >= this.selectTopIndex + 12
				) {
					container.scrollTop += 30;
					this.selectTopIndex++;
				}
				this.searchContent = this.recommendDataList[this.selectIndex].name;
			} else if (event.key === 'Backspace') {
				this.selectIndex = null;
			}
			if (this.selectTopIndex === 0 && 12 < this.selectIndex) {
				container.scrollTop = 30 * this.selectIndex;
				this.selectTopIndex = this.selectIndex - 11;
			} else if (this.selectTopIndex !== 0 && this.selectIndex === 0) {
				container.scrollTop = 0;
				this.selectTopIndex = 0;
			}
		});

		document.addEventListener('click', (event) => {
			let inputContainer = document.getElementById('input_container');
			let settingMenu = document.getElementById('setting_menu');
			let toolsContainer = document.getElementById('tools_container');

			// 检查点击事件的目标元素是否是你的 <div> 元素或其子元素
			if (!inputContainer.contains(event.target) && !settingMenu.contains(event.target) && !toolsContainer.contains(event.target)) {
				this.recommendShow = false;
				this.editBookmarkFlag = false;
				this.selectIndex = null;
				this.recommendDataList = [];
			}
		});
	},
	beforeDestroy() {
	},
};
</script>

<style scoped>
.setting_logo {
	width: 20px;
	position: fixed;
	right: 40px;
	top: 20px;
	border: none; /* 取消边框 */
	outline: none; /* 取消聚焦时的边框 */
}
.menu_container {
	position: absolute;
	z-index: 100;

	:deep(.el-dropdown-menu__item:hover) { background-color: #2D9B41 }

}
.container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
	overflow-y: scroll;
}
.logo_container {
	position: absolute;
	top: 20%;
	display: flex;
	font-family: "BMJUA", serif;
	align-items: center;
	justify-content: center;
	cursor: default;
	user-select: none;
}

.logo_font {
	font-size: 90px;
	font-family: "BMJUA", serif;
}

.input_container {
	position: absolute;
	top: calc(20% + 140px);
	width: 90%;
	max-width: 670px;
	align-items: flex-start;
	justify-content: flex-start;
	border: 1.5px solid black !important;
	border-radius: 15px;
	z-index: 99999;
	background-color: white;
}

.input_div {
	display: flex;
	width: 100%;
}

.input-box {
	font-size: 18px;
	width: 100%;
	height: 46px;
	border: none; /* 取消边框 */
	outline: none; /* 取消聚焦时的边框 */
}

.search_logo {
	width: 40px;
	height: 46px;
	background-image: url("../assets/images/svg/search/search.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.search_engine_baidu_logo {
	background-image: url("../assets/images/svg/search/baidu.svg");
	outline: none;
	border: none;
	cursor: pointer;
	align-items: center;
	width: 30px;
	height: 46px;
	margin: 0 10px 0 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.search_engine_biying_logo {
	background-image: url("../assets/images/svg/search/biying.svg");
	outline: none;
	border: none;
	cursor: pointer;
	align-items: center;
	width: 30px;
	height: 46px;
	margin: 0 10px 0 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.search_engine_google_logo {
	background-image: url("../assets/images/svg/search/google.svg");
	outline: none;
	border: none;
	cursor: pointer;
	align-items: center;
	width: 30px;
	height: 46px;
	margin: 0 10px 0 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.search_logo_baidu_mini {
	width: 20px;
}

.search_logo_biying_mini {
	width: 20px;
}

.search_logo_google_mini {
	width: 20px;
}

.search_logo_bookmark {
	width: 15px;
	margin-left: 10px;
}

.recommend_container {
	width: 96%;
	margin: auto;
	overflow: auto;
	margin-bottom: 10px;
}

.recommend_container_div {
	width: 100%;
	margin: auto;
	max-height: 360px;
	overflow: auto;
}

.line {
	margin: auto;
	border-top: 0.8px dashed grey;
	padding-bottom: 10px;
}

.recommend_content_unselect {
	height: 30px;
	cursor: default;
}

.recommend_content_unselect:active {
	background-color: #f3f3f3;
	border-radius: 10px;
	cursor: default;
}

.recommend_content_select {
	background-color: #f3f3f3;
	border-radius: 10px;
	height: 30px;
	cursor: default;
}

.recommend_content {
	line-height: 30px;
	padding: 0 10px;
	white-space: nowrap; /*强制span不换行*/
	display: inline-block; /*将span当做块级元素对待*/
	width: 100%;
	overflow: hidden; /*超出宽度部分隐藏*/
	text-overflow: ellipsis; /*超出部分以点号代替*/
}

.recommend_data_show {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.tools_container {
	position: absolute;
	top: calc(20% + 220px);
	width: 90%;
	height: 400px;
	max-width: 900px;
	z-index: 100;

	:deep(.el-tabs__item) { padding: 0 10px;}
	:deep(.el-tabs__item:hover) { color: #7e69b6;}
	:deep(.el-tabs__item.is-active) { color: white; }
	:deep(.el-tabs__active-bar) { background-color: #7e69b6;}
	:deep(.el-tabs__nav-wrap::after) { display: none }
	:deep(.el-tooltip__trigger) { padding: 2px 4px;background-color: #7e69b6; height: unset !important; border-radius: 5px; font-weight: bold}
	:deep(.is-icon-close) {color: red}
	:deep(.is-icon-close:hover) {background-color: #ffcdcd}
	:deep(.el-tabs__nav) {float: unset;justify-content: center}
	:deep(.el-popper) {margin-top: 100px}
}

.tools_container_in {
	animation: slideUpFadeIn 1.5s ease;
	z-index: 100;
}

.tools_container_out {
	animation: slideUpFadeOut 1.5s ease;
	z-index: 100;
}

@keyframes slideUpFadeIn {
	0% {
		opacity: 0;
		top: calc(20% + 300px);
	}
	100% {
		opacity: 1;
		top: calc(20% + 220px);
	}
}

@keyframes slideUpFadeOut {
	0% {
		opacity: 1;
		top: calc(20% + 220px);
	}
	100% {
		opacity: 0;
		top: calc(20% + 300px);
	}
}
.tools_container_books {
	//border: 1px solid black;
	height: 300px;
	font-size: 14px;
}

.bookmark_item_title {
	display: inline-block;
	margin-right: 15px;
	font-weight: bold;
	//background-color: #e1e1e1;
	color: #86340A;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	text-align: center;
}

.bookmark_item_title:hover {
	width: unset;
	min-width: 80px;
}

.bookmark_item_content {
	display: inline-block;
	margin-right: 15px;
	border-radius: 5px;
	//background-color: #f5f5f5;
	vertical-align: top;
	transition: background-color 0.2s linear;

	> a {
		display: block;
		padding: 4px 10px;
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: width 0.3s linear;
		box-sizing: border-box;
		text-align: center;
	}
}

.bookmark_item_content:hover {
	background-color: #e1e1e1;

	> a {
		min-width: 80px;
		width: unset;
	}
}

.grid-content-title {
	display: flex;
	align-items: center;
	white-space: nowrap; /* 防止换行 */
	overflow: hidden; /* 隐藏溢出内容 */
	text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
	color: white;
	//border: 1px solid #f2f3e1;
	background-color: #ed785c;
	font-weight: bold;
	//background-color: #d7d7d7;
	margin-right: 10px;
	border-radius: 5px;
	padding: 7px 5px;
	cursor: default;
}

.grid-content {
	display: flex;
	align-items: center;
	white-space: nowrap; /* 防止换行 */
	overflow: hidden; /* 隐藏溢出内容 */
	text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
	background-color: #F8F9FA;
	margin-right: 10px;
	border-radius: 5px;
	padding: 7px 5px;
	cursor: default;
}
.grid-content:hover {
	background-color: #DFE1E5;
	//border: 1px solid #DFE1E5;
}

.favicon {
	height: 16px;
	width: 16px;
	margin-right: 2px;
}





.container1 .ghost {
	/* 相对定位 */
	position: relative;
	/*width: 150px;*/
	/*height: 225px;*/
	width: 40px;
	margin: 0 10px 0 10px;
	height: 40px;
	/* 圆角属性 左上角和右上角为圆角 */
	border-radius: 75px 75px 0 0;
	background-color: #fff;
	/* 盒子阴影 inset是内阴影 啥都不加就是默认的外阴影(outset) */
	box-shadow: -4.4px 0 0 #dbdbdb inset, 0 0 50px #5939db;
	animation: ghost 2s infinite;
}
/* 眼睛 start */
.container1 .ghost .ghostEyes {
	/* 弹性布局 */
	display: flex;
	/* 让元素平均分配宽度 */
	justify-content: space-around;
	width: 18px;
	padding-top: 15px;
	margin: 0 auto;
}
/* 利用两个伪元素做出卡姿兰大眼睛 */
.container1 .ghost .ghostEyes::before,
.container1 .ghost .ghostEyes::after {
	content: "";
	width: 4px;
	height: 7px;
	border-radius: 50%;
	background-color: #00034b;
}
/* 眼睛 end */

/* 腮红 start  */
/* 逻辑跟眼睛一样 */
.container1 .ghost .ghostDimples {
	display: flex;
	justify-content: space-around;
	width: 30px;
	padding-top: 5px;
	margin: 0 auto;
}
.container1 .ghost .ghostDimples::before,
.container1 .ghost .ghostDimples::after {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #ffbeff;
}
/* 腮红 end */

/* 脚 start  */
.container1 .ghost .ghostFeet {
	/* 这个主要是向让四只脚水平排列  */
	display: flex;
	/* 绝对定位 */
	position: absolute;
	bottom: -10px;
	width: 100%;
}
.container1 .ghost .ghostFeet .ghostFoot {
	width: 25%;
	height: 15px;
	border-radius: 40%;
	background-color: #fff;
}
/* 设置一下最后一个 让它跟身体的内阴影一样 */
.container1 .ghost .ghostFeet .ghostFoot:last-child {
	/* 利用背景渐变色实现 to right 是从做到右 */
	background-image: linear-gradient(to right, #fff 55%, #dbdbdb 45%);
}
/* 脚 end */

/* 阴影 start */
.container1 .shadow {
	width: 40px;
	height: 10px;
	margin-left: 10px;
	margin-top: 20px;
	border-radius: 50%;
	background-color: #000232;
	/* 动画  名称 时长 infinite是无限次播放 */
	animation: shadow 2s infinite;
}
/* 阴影 end */
/* 然后制作漂浮的动画 */
@keyframes ghost {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		/* 2D位移 -15px 是向上走 */
		transform: translateY(-15px);
	}
}
@keyframes shadow {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		/* 缩放 .9比1小一点点 */
		transform: scale(0.9);
	}
}

</style>
